<template>
	<div id="venueDetail">
		<div class="breadcrumb">
			<img src="../../../../static/img/venueManage_1.png" class="head_img">
			<span class="title" @click="cancel()">场馆管理</span>
			<span>/ 场馆详情</span>
		</div>
		<div class="list">
			<div class="list_head">
				<span>场馆详细信息</span>
				<el-button type="primary" class="cancel" @click="cancel()">返回</el-button>
			</div>
			<el-form ref="venueForm" :model="venueForm" :rules="rules" label-width="90px">
				<el-form-item label="场馆名称:" prop="name">
					<el-input v-model="venueForm.name" placeholder="请输入场馆名称，不超过20个字符" class="el-input" disabled></el-input>
				</el-form-item>
				<el-form-item label="场馆地址:" prop="campusZone">
					<el-input v-model="venueForm.campusZone" class="el-input" disabled></el-input>
				</el-form-item>
				<el-form-item label="开馆时间:" prop="timeRange" required>
					<el-time-picker is-range v-model="venueForm.timeRange" format='HH:mm' placeholder="选择时间范围" disabled>
					</el-time-picker>
				</el-form-item>
				<el-form-item label="联系电话:" prop="linkPhone" required>
					<el-input v-model="venueForm.linkPhone" placeholder="请输入联系电话" class="el-input" disabled></el-input>
				</el-form-item>
				<el-form-item label="场馆详情:" prop="venueDetail">
					<el-input type="textarea" :autosize="{minRows: 5}" v-model="venueForm.venueDetail" style="width:70%;" disabled></el-input>
				</el-form-item>
				<el-form-item label="运动项目:" prop="sportItem" required>
					<div class="sportContain" disabled>
						<span v-for="item in venueForm.sportItem" :key="item" v-if="item" class="sportSpan">{{item.sportItemName}}</span>
					</div>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			let checkTime = (rule, value, callback) => {
				if (value) {
					callback();
				} else {
					callback(new Error("请选择场馆开馆时间"));
				}
			};
			let checkPhone = (rule, value, callback) => {
				if (value) {
					if (!/^1[34578]\d{9}$/.test(value)) {
						callback("请输入格式正确的联系电话");
					} else {
						callback();
					}
				} else {
					callback(new Error("请输入联系电话"));
				}
			};
			return {
				venueId: "0",
				sportType: [],
				venueForm: {
					name: "",
					campusZone: "",
					timeRange: "",
					venueDetail: "",
					linkPhone: "",
					sportItem: []
				},
				options: [],
				rules: {
					name: [
						{ required: true, message: "请输入场馆名称", trigger: "blur" },
						{ min: 1, max: 20, message: "不超过20个字符", trigger: "blur" }
					],
					campusZone: [
						{ required: true, message: "请选择场馆所属校区", trigger: "change" }
					],
					timeRange: [{ validator: checkTime }],
					linkPhone: [{ validator: checkPhone, trigger: "blur" }],
					venueDetail: [
						{ min: 1, max: 100, message: "不超过100个字符", trigger: "blur" }
					]
				}
			};
		},
		mounted() {
			this.venueId = this.$util.getUrlParam("venueId");
			this.getDetail(this.venueId);
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//返回
			cancel() {
				location.href = "/#/venueManage";
			},
			//编辑场馆是获取场馆详情
			getDetail(id) {
				let url = this.$util.domain + "/erp/api/v20/venue/detail";

				this.$http({
					url,
					method: "GET",
					params: {
						venueId: parseInt(id)
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let dataObj = response.data.data;
						let now = new Date().format("yyyy/MM/dd");
						let startTime = new Date(now + " " + dataObj.startTime);
						let endTime = new Date(now + " " + dataObj.endTime);

						this.venueForm = {
							name: dataObj.name,
							campusZone: dataObj.unName,
							linkPhone: dataObj.linkPhone,
							timeRange: [startTime, endTime],
							venueDetail: dataObj.introduction,
							sportItem: dataObj.sportTypeItems
						};
					}
				});
			}
		}
	};
</script>

<style scoped>
	#venueDetail {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	.title {
		color: #0398FF;
	}

	.save {
		position: absolute;
		right: 120px;
		background-color: #00c18b;
		border-radius: 0;
		width: 80px;
	}

	span.cancel {
		position: absolute;
		right: 20px;
		background: #333744;
		border-radius: 0;
		color: #fff;
		width: 80px;
		line-height: 36px;
		height: 36px;
		text-align: center;
		display: inline-block;
		cursor: pointer;
		font-size: 14px;
	}

	#venueDetail .el-input {
		display: inline-block;
		width: 40%;
	}

	#venueDetail .sportContain {
		margin-top: 10px;
		width: 700px;
		height: 135px;
		border: solid 1px #bfcbd9;
		box-sizing: border-box;
		overflow-y: scroll;
		background: #eef1f6;
		cursor: pointer;
	}

	#venueDetail .sportSpan {
		display: block;
		text-align: center;
		float: left;
		height: 30px;
		line-height: 30px;
		padding: 0 15px 0 15px;
		border: solid 1px #999;
		border-radius: 5px;
		margin: 10px;
		box-sizing: border-box;
		font-size: 12px;
		position: relative;
		cursor: pointer;
	}
</style>